function init() {
    var width = 50, height = 50;
    var shapes = Q.Shapes.getAllShapes(-width / 2, -height / 2, width, height);
    var images = [];
    $('#editor').graphEditor({
        images: [{
            displayName: 'Default Shapes',
            images: images,
            close: false
        }],
        callback: function (editor) {
            var createElement = function (options) {
                options = options || {};
                var element = document.createElement(options.tagName || 'div');
                if(options.class){
                    $(element).addClass(options.class);
                }
                if (options.parent) {
                    options.parent.appendChild(element);
                }
                if(options.style){
                    element.setAttribute('style', options.style);
                }
                if(options.css){
                    $(element).css(options.css);
                }
                if(options.html){
                    $(element).html(options.html);
                }
                //$(element).attr(options);
                return element;
            };
            Q.createElement = createElement;


            function StringEditor(property, parent, getter, setter, scope) {
                this.getter = getter;
                this.setter = setter;
                this.scope = scope;
                this.property = property;

                this.createHtml(parent);
            }

            StringEditor.prototype = {
                _getValue: function () {
                    return this.getter.call(this.scope);
                },
                update: function () {
                    this.value = this._getValue();
                },
                setValue: function (v) {
                    this.input.value = valueToString(v, this.property.type);
                },
                getValue: function(){
                    return stringToValue(this.input.value, this.property.type);
                },
                createHtml: function (parent) {
                    var property = this.property;
                    var input = Q.createElement({
                        tagName: 'input',
                        class: "form-control",
                        parent: parent
                    });
                    this.input = input;

                    if(property.readonly){
                        input.setAttribute('readonly', 'readonly');
                    }
                    this.update();
                    $(input).on('input', function (evt) {
                        if (this.ajdusting) {
                            return;
                        }
                        this.setter.call(this.scope, this);
                    }.bind(this));
                }
            };

            function TextInput () {
                Q.doSuperConstructor(this, TextInput, arguments);
            }

            TextInput.prototype = {
                createHtml: function (parent) {
                    var input = Q.createElement({
                        tagName: 'input',
                        class: "form-control",
                        parent: parent
                    });
                    Q.createElement({tagName: 'span', parent: parent, class: "input-group-addon", html: '<i></i>'});
                    this.input = input;

                    // this.update();

                    /*            $(parent).colorpicker({
                                    container: true
                                }).on('changeColor', function (evt) {
                                    if (this.ajdusting) {
                                        return;
                                    }
                                    this.setter.call(this.scope, this);
                                }.bind(this));*/
                }
            };

            Q.extend(TextInput, StringEditor);


            /*editor.toolbox.hideDefaultGroups();
            graph = editor.graph;
            new GridBackground(graph);

            graph.popupmenu.getMenuItems = function (graph, data, evt) {
                var result = [];
                // result.unshift(Q.PopupMenu.Separator);

                if (graph.selectionModel.length) {
                    result.push({
                        text: '合并成图标', action: function () {
                            var node = composeShape(graph.selectionModel);

                            // graph.removeSelection();
                            graph.addElement(node);
                        }
                    })
                    result.push(Q.PopupMenu.Separator);
                }
                result.push({
                    text: '清空画布', action: function () {
                        graph.clear();
                    }
                })
                return result;
            }*/
        }
    })
}

(function (Q, $) {
/*    $.fn.graphEditor = function (options) {
        return this.each(function () {
            var editor = this.graphEditor;
            if (!editor) {
                this.graphEditor = editor = new Editor(this, options);
            }
            return editor;
        });
    }*/
})(Q, jQuery);
/*!function (Q) {

}(Q);*/

init();